<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2022年7月12日 上午11:07:25
 */
import {changeNicknameAction, changePasswordAction, getInfoAction, $response} from '~/api'
import {reGetAdmin} from "~/tool/info";
const admin_info = ref(false)
const getInfo = async () => {
  const response = await getInfoAction()
  $response(response, () => {
    admin_info.value = response.data.info
  })
}
onMounted(() => {
  getInfo()
})
const changeNickname = async () => {
  const response = await changeNicknameAction(admin_info.value.nickname)
  $response(response, () => {
    reGetAdmin()
    window.$message().success('修改成功')
  })
}
const changePassword = async () => {
  if (password_data.value.password !== password_data.value.check_password) {
    return window.$message().error('请确认密码')
  }
  const response = await changePasswordAction({
    id: admin_info.value.account_id,
    password: password_data.value.password,
    old_password: password_data.value.old_password,
  })
  $response(response, () => {
    password_data.value = {
      check_password: '',
      password: '',
      old_password: '',
    }
    window.$message().success('修改成功')
  })
}
const password_data = ref({
  check_password: '',
  password: '',
  old_password: '',
})
</script>
<template>
  <n-card title="个人信息">
    <div v-if="admin_info">
      <div>
        <n-space align="center">
          <div>
            <n-tag>账号</n-tag>
          </div>
          <div>
            <n-input class="info_input_wrapper" disabled v-model:value="admin_info.account"></n-input>
          </div>
        </n-space>
      </div>
      <div mt-2>
        <n-space align="center">
          <div>
            <n-tag>昵称</n-tag>
          </div>
          <div>
            <n-input class="info_input_wrapper" v-model:value="admin_info.nickname"></n-input>
          </div>
          <div>
            <n-button @click="changeNickname()" type="primary">修改昵称</n-button>
          </div>
        </n-space>
      </div>
      <div mt-5>
        <n-space align="center">
          <div>
            <n-tag>
              <div class="password_title_wrapper">旧密码</div>
            </n-tag>
          </div>
          <div>
            <n-input class="info_input_wrapper" v-model:value="password_data.old_password"></n-input>
          </div>
        </n-space>
      </div>
      <div mt-2>
        <n-space align="center">
          <div>
            <n-tag>
              <div class="password_title_wrapper">新密码</div>
            </n-tag>
          </div>
          <div>
            <n-input class="info_input_wrapper" v-model:value="password_data.password"></n-input>
          </div>
        </n-space>
      </div>
      <div mt-2>
        <n-space align="center">
          <div>
            <n-tag>
              <div class="password_title_wrapper">确认密码</div>
            </n-tag>
          </div>
          <div>
            <n-input class="info_input_wrapper" v-model:value="password_data.check_password"></n-input>
          </div>
        </n-space>
      </div>
      <div mt-2>
        <n-button @click="changePassword()" type="primary">修改密码</n-button>
      </div>
    </div>
  </n-card>
</template>
<style scoped>
.password_title_wrapper {
  text-align: center;
  width: 65px;
}

.info_input_wrapper {
  width: 200px;
}
</style>
<route>
{"meta":{"title":"个人信息","icon":"i-ic-baseline-account-box"}}
</route>

